<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>WireIt - LogicGates example</title>
	<link rel="icon" href="../../favicon.ico" type="image/png" />
  <link rel="SHORTCUT ICON" href="../../favicon.ico" type="image/png" />

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />

<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>

<!-- InputEx with wirable options (WirableField-beta) -->
<script src="../../lib/inputex/js/inputex.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/Field.js"  type='text/javascript'></script>
<script type="text/javascript" src="../../js/util/inputex/WirableField-beta.js"></script>
<script src="../../lib/inputex/js/Group.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>

<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../../js/WireIt.js"></script>
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../js/Wire.js"></script>
<script type="text/javascript" src="../../js/Terminal.js"></script>
<script type="text/javascript" src="../../js/util/DD.js"></script>
<script type="text/javascript" src="../../js/util/DDResize.js"></script>
<script type="text/javascript" src="../../js/Container.js"></script>
<script type="text/javascript" src="../../js/ImageContainer.js"></script>
<script type="text/javascript" src="../../js/Layer.js"></script>
<script type="text/javascript" src="../../js/util/inputex/FormContainer-beta.js"></script>

<script type="text/javascript" src="../../js/WiringEditor.js"></script>

<script>

// InputEx needs a correct path to this image
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";

YAHOO.util.Event.onDOMReady( function() {
	
	new WireIt.WiringEditor({
		
		modules: [
					{
						"name": "AND",
						
						"container" : {
							"xtype":"WireIt.ImageContainer", 
							"image": "images/gate_and.png",
		   				"terminals": [
		   					{"direction": [-1,0], "offsetPosition": [-3,2]},
		   					{"direction": [-1,0], "offsetPosition": [-3,37]},
		   					{"direction": [1,0], "offsetPosition": [103,20]}
		   				]
						}
						
					},

					{
					  "name": "OR",

						"container": {
					   		"xtype":"WireIt.ImageContainer", 
					   		"image": "images/gate_or.png",
								"terminals": [
									{"direction": [-1,0], "offsetPosition": [-3,2]},
									{"direction": [-1,0], "offsetPosition": [-3,37]},
									{"direction": [1,0], "offsetPosition": [103,20]}
								]
						}
					},

					{
					  "name": "NOT",
					  "container": {
							"xtype":"WireIt.ImageContainer", 
						   "image": "images/gate_not.png",
							"terminals": [
								{"direction": [-1,0], "offsetPosition": [-12,23]},
								{"direction": [1,0], "offsetPosition": [117,23]}
							]
						}
					},

					{
					   "name": "NAND",
					   "container": {
						   "xtype":"WireIt.ImageContainer", 
						   "image": "images/gate_nand.png",
							"terminals": [
								{"direction": [-1,0], "offsetPosition": [-3,2]},
								{"direction": [-1,0], "offsetPosition": [-3,37]},
								{"direction": [1,0], "offsetPosition": [103,20], "wireConfig":{"color": "#FFFF00"}}
							]
						}
					},

					{
					   "name": "XOR",
					   "container": {
					   	"xtype":"WireIt.ImageContainer", 
					   	"image": "images/gate_xor.png",
							"terminals": [
								{"direction": [-1,0], "offsetPosition": [-3,2]},
								{"direction": [-1,0], "offsetPosition": [-3,37]},
								{"direction": [1,0], "offsetPosition": [103,20]}
							]
						}
					}

		]
	});
	
}); 
</script>

<style>
body {
	margin:0;
	padding:0;
	font-size: 10px;
}
#left {
	font-size: 16pt;
}
</style>


</head>

<body class="yui-skin-sam">

	<div id="top">
		<div class="logo">WireIt</a></div>
		<div id="toolbar"></div>
		<div class="topright">
			<span>Hello there !</span> | 
			<a href="../..">back to WireIt</a>
		</div>
	</div>


	<div id="left">
		<p>Click on a logic gate to add it to the layer.</p>
	</div>

	<div id="center">
	</div>

</body>
</html>